<!DOCTYPE html>
<html>
<head>
    <title>SerenityOS: The second year</title>
    <style>
        body {
            font-family: Verdana, Arial, Helvetica, sans-serif;
        }
        #banner {
            padding: 10px;
            background-color: #6699cc;
            color: white;
        }
        #buggie {
            position: absolute;
            top: 8px;
            right: 20px;
        }
        #browser_ad {
            padding: 10px;
            text-align: center;
            border: 1px dashed gray;
        }
        .shot .inner {
            padding: 16px;
        }
        .shot .title {
            padding: 4px;
            background-color: #6699cc;
            color: white;
        }
        .shot img {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <h1 id=banner>SerenityOS: The second year</h1>
    <img id="buggie" src="buggie2.png">
    <div id="browser_ad">
        <img src="getbrowser.gif"><br>
        Best viewed in 1024x768 with the SerenityOS Browser!<br>
        <font color=#ccc>(jk it works everywhere)</font>
    </div>
    <p>
        <b id="greeting">Hello friends!</b>
    </p>
    <p>
        Today is the second birthday of <a href="http://serenityos.org/">SerenityOS</a>,
        counting from the
        <a href="https://github.com/SerenityOS/serenity/commit/5a300551574451fbf509685d11095bda4fcb20be">first commit</a>
        in the <a href="https://github.com/SerenityOS/serenity/">git repository</a>,
        on October 10, 2018.
    </p>
    <p>
        Previous birthdays: <a href="http://serenityos.org/happy/1st/">1st</a>.
    </p>
    <p>
        <b>NOTE:</b> Since the HTML and CSS support has improved over the last
        year, this page uses a bit more of them to showcase SerenityOS browser
        support. :^)
    </p>

    <h2>Introduction to SerenityOS</h2>

    <p>
        SerenityOS is a from-scratch desktop operating system that combines
        a Unix-like core with the look&amp;feel of 1990s productivity software.
        It's written in modern C++ and goes all the way from kernel to web browser.
        The project aims to build everything in-house instead of relying on
        third-party libraries.
    </p>

    <p>
        I started building this system after
        <a href="https://www.youtube.com/watch?v=j3JkNGKZtqM">finishing a 3-month rehabilitation program for drug addiction</a>
        in 2018. I found myself with a lot of time and nothing to spend it on.
        So I began building something I'd always wanted to build: my very own dream OS.
    </p>

    <p>
        Parts of my development work is presented in screencast format on
        <a href="https://youtube.com/andreaskling">my YouTube channel</a>.
        I also post monthly update videos showcasing new features there.
    </p>

    <h2>Snapshots from year 2 of development</h2>

    <p>
        Anyways, let's continue looking at screenshots where we left off
        in <a href="http://serenityos.org/happy/1st/">last year's birthday celebration</a>!

        We had just gotten the browser strong enough to display the first
        birthday celebration page..
    </p>

    <div class="shot">
        <div class="title"><b>2019-10-31:</b> :hover selectors in the Browser</div>
        <div class="inner">
            <a href="2019-10-31.png"><img src="thumb.2019-10-31.png"></a>
            <p class="info">
                I remember first seeing links change color when hovered back
                in the IE3 days, and thinking it was the coolest thing ever.
            </p>
        </div>
    </div>

    <div class="shot">
        <div class="title"><b>2019-11-04:</b> Ladies and gentlemen, we've got Quake!</div>
        <div class="inner">
            <iframe width="560" height="315" data-src="https://www.youtube.com/embed/-rMY7Fv84eA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            <p class="info">
                Jesse ported Quake to Serenity. We didn't have sound at
                first but that was fixed later. Still, it was very exciting!
            </p>
        </div>
    </div>


    <div class="shot">
        <div class="title"><b>2019-11-30:</b> Playing with "find in files" in the HackStudio IDE</div>
        <div class="inner">
            <a href="2019-11-30.png"><img src="thumb.2019-11-30.png"></a>
            <p class="info">
                I decided to start building an IDE for C++ development.
                Since SerenityOS is a programmer's OS, a capable development
                environment is a must-have.
            </p>
        </div>
    </div>

    <div class="shot">
        <div class="title"><b>2019-12-08:</b> Ported the nesalizer NES emulator (with sound support, too!)</div>
        <div class="inner">
            <iframe width="560" height="315" data-src="https://www.youtube.com/embed/6y68tX7OHCs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            <p class="info">
                Getting a NES emulator running helped drive improvements for
                threading and timing APIs in the kernel.
                Check out the video to see me die before even reaching the 1st palace..
            </p>
        </div>
    </div>

    <div class="shot">
        <div class="title"><b>2019-12-30:</b> SerenityOS was hacked in a 36c3 CTF</div>
        <div class="inner">
            <img src="hxp.png">
            <p class="info">
                Someone put together a CTF (Capture The Flag) challenge at the
                36c3 computer security conference. I learned about this when
                two exploits showed up (complete with write-ups!) on GitHub:

                <a href="https://github.com/Fire30/CTF-WRITEUPS/tree/master/36c3_ctf/wisdom">one from Fire30</a> and <a href="https://github.com/braindead/ctf-writeups/tree/master/2019/36c3/wisdom">another one from braindead</a>.
                <br><br>
                This caught me by total surprise and I was a little bit disappointed
                at how easy it was to break into the system. This event sent me down
                a deep rabbit hole of learning about system security and applying
                everything I learned to secure Serenity. I wanted to make sure that
                the next CTF presented more of a challenge!
            </p>
        </div>
    </div>

    <div class="shot">
        <div class="title"><b>2020-01-12:</b> I ported the game VVVVVVV to Serenity</div>
        <div class="inner">
            <iframe width="560" height="315" data-src="https://www.youtube.com/embed/wTXjWf_hVCI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            <p class="info">
                After the classic platformer VVVVVV was released as open-source,
                I wanted to get it running on Serenity. It was pretty easy
                to get it going since it used SDL and we already had a decent SDL port.
                The game was open sourced on Jan 10th and I had it running 2 days later.
            </p>
        </div>
    </div>

    <div class="shot">
        <div class="title"><b>2020-01-31:</b> pledge() and unveil() all the things</div>
        <div class="inner">
            <a href="2020-01-31.png"><img src="thumb.2020-01-31.png"></a>
            <p class="info">
                Outside of enabling every protection mechanism the x86 has to offer,
                there was also a fair amount of architectural Unix-level security
                work. One of the most important pieces was adopting two OpenBSD-like
                system calls: <code>pledge()</code> and <code>unveil()</code>.
                <br><br>
                I wrote about <a href="https://awesomekling.github.io/pledge-and-unveil-in-SerenityOS/">Serenity's pledge and unveil implementation on my blog</a>.
            </p>
        </div>
    </div>

    <div class="shot">
        <div class="title"><b>2020-02-22:</b> Kernel symbols in the Profiler</div>
        <div class="inner">
            <a href="2020-02-22.png"><img src="thumb.2020-02-22.png"></a>
            <p class="info">
                The system's built-in time profiler became a lot more helpful when
                we added symbolication of kernel stack frames. You can tell them apart
                from userspace frames by the little red icon in the graph!
            </p>
        </div>
    </div>

    <div class="shot">
        <div class="title"><b>2020-02-29:</b> A simple built-in web server</div>
        <div class="inner">
            <a href="2020-02-29.png"><img src="thumb.2020-02-29.png"></a>
            <p class="info">
                For my own birthday (February 9th), I celebrated by building a simple
                HTTP server for Serenity. I always loved the simple HTTP server that
                comes with Python, and I wanted something similar for Serenity.
            </p>
        </div>
    </div>

    <div class="shot">
        <div class="title"><b>2020-03-31:</b> The JavaScript explosion</div>
        <div class="inner">
            <a href="2020-03-31.png"><img src="thumb.2020-03-31.png"></a>
            <p class="info">
                People kept asking me if the web browser would ever support JavaScript.
                I honestly felt a bit intimidated when starting this project but I just
                did it anyway, and a whole bunch of people very quickly joined up to
                help out.
                <br><br>
                I started by <a href="https://www.youtube.com/watch?v=byNwCHc_IIM">implementing a simple AST interpreter</a>,
                and building some test AST's by hand. Then Stephan added a parser, and Sergey made a REPL,
                and then things really took off, with Linus and Matt going especially deep.
            </p>
        </div>
    </div>

    <div class="shot">
        <div class="title"><b>2020-05-28:</b> Changing the LICENSE (a tiny bit)</div>
        <div class="inner">
            <iframe width="560" height="315" data-src="https://www.youtube.com/embed/1jbd2OmW2DE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            <p class="info">
                To celebrate the project reaching 10'000 commits, I updated the main license file
                to assign copyright to "the SerenityOS developers" instead of just myself.
            </p>
        </div>
    </div>

    <div class="shot">
        <div class="title"><b>2020-05-30:</b> Accessing more of the web with TLS (and HTTPS)</div>
        <div class="inner">
            <a href="2020-05-30.png"><img src="thumb.2020-05-30.png"></a>
            <p class="info">
                Browser development was moving forward with the LibJS engine allowing
                more and more complex things. But we were still limited to visiting unencrypted
                websites served over HTTP.
                <br><br>
                In comes LibTLS and LibCrypto! Thanks to some amazing work by Ali, assisted by
                Itamar and DexesTTP, we can now talk to HTTPS websites as well. The whole world
                opens up!
                <br><br>
                I was super excited when I could get Google loading for the first time!
            </p>
        </div>
    </div>

    <div class="shot">
        <div class="title"><b>2020-06-22:</b> Our very own JPEG decoder</div>
        <div class="inner">
            <a href="2020-06-22.png"><img src="thumb.2020-06-22.png"></a>
            <p class="info">
                Devashish implemented a JPEG decoder for LibGfx and suddenly we had access
                to a world of photos!
            </p>
        </div>
    </div>

    <div class="shot">
        <div class="title"><b>2020-06-30:</b> Working on ACID2 compliance test fixes</div>
        <div class="inner">
            <a href="2020-06-30.png"><img src="thumb.2020-06-30.png"></a>
            <p class="info">
                I spent a whole bunch of time improving standards compliance in the
                LibWeb engine's CSS implementation.
                I've been using the classic <a href="http://acid2.acidtests.org/">ACID2 test</a>
                to drive some of the work. As you can see from the picture, a lot of work
                still remains!
            </p>
        </div>
    </div>

    <div class="shot">
        <div class="title"><b>2020-07-27:</b> Catching memory errors with a userspace emulator</div>
        <div class="inner">
            <a href="2020-07-27.png"><img src="thumb.2020-07-27.png"></a>
            <p class="info">
                One tool I've missed ever since starting the SerenityOS project is the amazing
                <a href="https://www.valgrind.org/">Valgrind</a>.
                <br><br>
                I finally decided to do something about it, and I was curious how such a thing might
                be implemented, so I set out to create a workalike of my own.
                <br><br>
                I've hacked on x86 emulators in the past, so I decided to bring my knowledge in that
                area into Serenity and started building UserspaceEmulator (or UE for short), a program
                that implements a ring-3-only x86 CPU and intercepts system calls so we can instrument them.
                <br><br>
                Within a couple of weeks of hacking, I could run compiled programs without changing
                anything about them, and catch memory leaks just like Valgrind would!
            </p>
        </div>
    </div>

    <div class="shot">
        <div class="title"><b>2020-08-30:</b> More desktop games! (Chess and 2048)</div>
        <div class="inner">
            <a href="2020-08-30.png"><img src="thumb.2020-08-30.png"></a>
            <p class="info">
                I've always been a fan of desktop games, ever since the days of the
                Microsoft Entertainment Pack.
                <br><br>
                Here we were joined by two great games, a 2048 clone by Ali &amp; Sergey,
                and a Chess game by Peter. The chess engine is still pleasantly stupid,
                so I can even beat it myself!
                <br><br>
                Also of note: the awesome icons in the system menu! Many of them were
                drawn by thankyouverycool (so thank you, thankyouverycool, very cool!)
                <br><br>
                Even more: the "About" box was redesigned by Nick, and Buggie the system
                mascot was drawn by Simon! These things happened much earlier but I'm
                mentioning them here since they are visible in the screenshot.
            </p>
        </div>
    </div>

    <div class="shot">
        <div class="title"><b>2020-09-22:</b> Git integration in the HackStudio IDE</div>
        <div class="inner">
            <a href="2020-09-22.png"><img src="thumb.2020-09-22.png"></a>
            <p class="info">
                Itamar started adding support for Git integration (diffing, staging, commits)
                to the HackStudio IDE.
                <br><br>
                Note that this is an optional feature that is only available if you have the
                <code>git</code> port installed. HackStudio is the only program in the system
                that makes use of ports since we don't have our own implementations of
                git, a compiler, or a linker... yet. :^)
            </p>
        </div>
    </div>

    <div class="shot">
        <div class="title"><b>2020-09-29:</b> Playing with the Spreadsheet application</div>
        <div class="inner">
            <a href="2020-09-29.png"><img src="thumb.2020-09-29.png"></a>
            <p class="info">
                The Spreadsheet app was started by Ali and is powered internally by the
                LibJS JavaScript engine. Cell expressions are evaluated as JS.
                It feels really neat so far, although we're still figuring out
                how it should work.
                <br><br>
                It even has built-in documentation, which is generated from the JavaScript
                source code!
            </p>
        </div>
    </div>

    <div class="shot">
        <div class="title"><b>2020-10-03:</b> Copying images between applications!</div>
        <div class="inner">
            <a href="2020-10-03.png"><img src="thumb.2020-10-03.png"></a>
            <p class="info">
                While we've had a system clipboard for a long time, it only recently
                became possible to copy anything other than text between apps.
                <br><br>
                Here I had just added an image context menu in the Browser so you can
                copy images from the web directly to the clipboard!
                <br><br>
                Also on display: the PixelPaint app (formerly PaintBrush), which became
                a layer-based image editor in the last year.
            </p>
        </div>
    </div>

    <div class="shot">
        <div class="title"><b>2020-10-10:</b> Making this very webpage!</div>
        <div class="inner">
            <a href="2020-10-10.png"><img src="thumb.2020-10-10.png"></a>
            <p class="info">
                I had to fix some CSS bugs in the LibWeb engine while putting together
                this page. I have also discovered a whole bunch of things that need
                fixing. But this is where we are right now!
                <br><br>
                <b><font color="#404">Happy 2nd birthday SerenityOS! I'm so proud of you, and of all the people who have worked on you!</font></b>
            </p>
        </div>
    </div>

    <h2>Conclusion</h2>

    <p>
        And with that, this little tour of the second year of Serenity is over!
    </p>
    <p>
        If you would like to see more, I've continued the tradition of making a monthly
        round-up video at the end of each month. You can find them in
        <a href="https://www.youtube.com/playlist?list=PLMOpZvQB55bfp6ykOLayLqLrjcpv_Sw3P">a special playlist</a>
        on my YouTube channel.
    </p>

    <h2>Thanks</h2>

    <p>
        To all the lovely people have helped out in the last year, with code, bug reports,
        man pages, commenting/liking/sharing my videos, sending letters, chilling on IRC,
        retweeting my shower thoughts, telling your friends, etc, thank you!
        I'm eternally grateful for all the love and support this project gets.
    </p>
    <p>
        And also, a huge <b>thank you!</b> to everyone who has supported me via
        <a href="https://github.com/sponsors/awesomekling">GitHub Sponsors</a>,
        <a href="https://patreon.com/serenityos">Patreon</a>,
        and <a href="https://paypal.me/awesomekling">PayPal</a>.

        I hope to be able to do this full time some day, and your continued support
        is keeping the dream alive!
    </p>
    <p>
        All right, let's keep pushing forward into year 3!
    </p>
    <p>
        <i>Andreas Kling, 2020-10-10</i>
    </p>
    <p>
    <a href="https://github.com/awesomekling">GitHub</a> |
    <a href="https://youtube.com/c/AndreasKling">YouTube</a> |
    <a href="https://twitter.com/awesomekling">Twitter</a> |
    <a href="https://patreon.com/serenityos">Patreon</a> |
    <a href="https://paypal.me/awesomekling">PayPal</a>
    </p>
    <script>
        var g = document.getElementById("greeting");
        var gi = 0;
        var gt = "hello friends!";
        setInterval(function() {
            gi++;
            if (gi == g.innerHTML.length)
                gi = 0;
            var t1 = gt.substring(0, gi);
            var t2 = gt.substring(gi, gt.length);
            var nt = t1.toUpperCase() + t2.toLowerCase();
            g.innerHTML = nt;
        }, 250);

        // FIXME: We don't load the YouTube embeds on SerenityOS for now since they
        //        bog down performance massively and we can't play video yet anyway.
        if (navigator.platform != "SerenityOS") {
            for (iframe of document.getElementsByTagName("iframe")) {
                iframe.setAttribute("src", iframe.getAttribute("data-src"));
            }
        }
    </script>
</body>
</html>
